<html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />	
<script src="js/jquery-1.3.2.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
 $(document).ready(function() {

	$("#dialog").dialog({ 
		autoOpen: false, 
		close: function(event, ui) {
			alert("Goodbye!"); 
		}
	 });
	 
	$("#dialogBoxButton").click(function() {
		$("#dialog").dialog("open");
	});

});
</script>
</head>

<body>

  <div id="dialog" title="Basic Dialog">
    <p>
       This is the default dialog which is useful for displaying 
       information. The dialog window can be moved, resized and closed with the 'x' icon.
    </p>
  </div>

  <button id="dialogBoxButton">Dialog Box</button>

</body>
</html>